	@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/BebasNeue-webfont.woff') format('woff'),
         url('fonts/BebasNeue-webfont.ttf') format('truetype'),
         url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { 
	margin:0;
	padding:0;
}
html,body {
	margin:0;
	padding:0;
}
table {
	border-collapse:collapse;
	border-spacing:0;
}
fieldset,img { 
	border:0;
}
input{
	border:1px solid #b0b0b0;
	padding:3px 5px 4px;
	color:#979797;
	width:190px;
}
address,caption,cite,code,dfn,th,var {
	font-style:normal;
	font-weight:normal;
}
ol,ul {
	list-style:none;
}
caption,th {
	text-align:left;
}
h1,h2,h3,h4,h5,h6 {
	font-size:100%;
	font-weight:normal;
}
q:before,q:after {
	content:'';
}
abbr,acronym { border:0;
}
a{
	color: #333;
	text-decoration: none;
}
.container{
	position: relative;
	text-align: center;
}
.clr{
	clear: both;
}
.container > header{
	padding: 20px 30px 10px 30px;
	margin: 0px 20px 10px 20px;
	position: relative;
	display: block;
	text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
    text-align: center;
}
.container > header h1{
	font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
	font-size: 35px;
	line-height: 35px;
	position: relative;
	font-weight: 400;
	color: rgba(27,54,81,0.8);
	text-shadow: 1px 1px 1px rgba(0,0,0,0.3);
    padding: 0px 0px 5px 0px;
}
.container > header h1 span{
	color: #c7957b;
	text-shadow: 0px 1px 1px rgba(255,255,255,0.8);
}
.container > header h2, p.info{
	font-size: 16px;
	font-style: italic;
	color: #4a3124;
	text-shadow: 0px 1px 1px rgba(255,255,255,1);
}
		* {margin: 0; padding: 0;}

		body{
			background: url('bg.jpg') repeat;
		}

		.container {
			padding: 50px 200px;
			text-align: center;
		}

		.timer {
			padding: 10px;
			overflow: hidden;
			display: inline-block;
			border: 7px solid #efefef;
			border-radius: 5px;
			position: relative;
			
			background: linear-gradient(top, #222, #444);
			background: -webkit-linear-gradient(top, #222, #444);
			background: -moz-linear-gradient(top, #222, #444);
			background: -o-linear-gradient(top, #222, #444);
			
			box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1);
			-webkit-box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1);
			-moz-box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1);
			-o-box-shadow: inset 0 -2px 10px 1px rgba(0, 0, 0, 0.75), 0 5px 20px -10px rgba(0, 0, 0, 1);
		}

		.cell {
			/*Should only display 1 digit. Hence height = line height of .numbers and width = width of .numbers*/
			width: 0.60em;
			height: 40px;
			font-size: 50px;
			overflow: hidden;
			position: relative;
			float: left;
		}

		.numbers {
			width: 0.6em;
			line-height: 40px;
			font-family: digital, arial, verdana;
			text-align: center;
			color: #fff;

			position: absolute;
			top: 0;
			left: 0;

			/*Glow to the text*/
			text-shadow: 0 0 5px rgba(255, 255, 255, 1);
		}

		/*Styles for the controls*/
		#timer_controls {
			margin-top: -5px;
		}
		#timer_controls label {
			cursor: pointer;
			padding: 5px 10px;
			background: #efefef;
			font-family: arial, verdana, tahoma;
			font-size: 11px;
			border-radius: 0 0 3px 3px;
		}
		input[name="controls"] {display: none;}

		/*Control code*/
		#stop:checked~.timer .numbers {
			animation-play-state: paused;
			-webkit-animation-play-state: paused;
			-moz-animation-play-state: paused;
			-o-animation-play-state: paused;
		}
		#start:checked~.timer .numbers {
			animation-play-state: running;
			-webkit-animation-play-state: running;
			-moz-animation-play-state: running;
			-o-animation-play-state: running;
		}
		#reset:checked~.timer .numbers {
			animation: none;
			-webkit-animation: none;
			-moz-animation: none;
			-o-animation: none;
		}

		.moveten {
			/*The digits move but dont look good. We will use steps now 10 digits = 10 steps. You can now see the digits swapping instead of moving pixel-by-pixel*/
			animation: moveten 1s steps(10, end) infinite;
			-webkit-animation: moveten 1s steps(10, end) infinite;
			-moz-animation: moveten 1s steps(10, end) infinite;
			-o-animation: moveten 1s steps(10, end) infinite;
			
			/*By default animation should be paused*/
			animation-play-state: paused;
			-webkit-animation-play-state: paused;
			-moz-animation-play-state: paused;
			-o-animation-play-state: paused;
		}
		.movesix {
			animation: movesix 1s steps(6, end) infinite;
			-webkit-animation: movesix 1s steps(6, end) infinite;
			-moz-animation: movesix 1s steps(6, end) infinite;
			-o-animation: movesix 1s steps(6, end) infinite;
			
			animation-play-state: paused;
			-webkit-animation-play-state: paused;
			-moz-animation-play-state: paused;
			-o-animation-play-state: paused;
		}

		/*Now we need to sync the animation speed with time speed*/
		/*One second per digit. 10 digits. Hence 10s*/
		.second {
			animation-duration: 10s;
			-webkit-animation-duration: 10s;
			-moz-animation-duration: 10s;
			-o-animation-duration: 10s;
		}
		.tensecond {
			animation-duration: 60s;
			-webkit-animation-duration: 60s;
			-moz-animation-duration: 60s;
			-o-animation-duration: 60s;
		} /*60 times .second*/

		.milisecond {
			animation-duration: 1s;
			-webkit-animation-duration: 1s;
			-moz-animation-duration: 1s;
			-o-animation-duration: 1s;
		} /*1/10th of .second*/
		.tenmilisecond {
			animation-duration: 0.1s;
			-webkit-animation-duration: 0.1s;
			-moz-animation-duration: 0.1s;
			-o-animation-duration: 0.1s;
		}
		.hundredmilisecond {
			animation-duration: 0.01s;
			-webkit-animation-duration: 0.01s;
			-moz-animation-duration: 0.01s;
			-o-animation-duration: 0.01s;
		}

		.minute {
			animation-duration: 600s;
			-webkit-animation-duration: 600s;
			-moz-animation-duration: 600s;
			-o-animation-duration: 600s;
		} /*60 times .second*/
		.tenminute {
			animation-duration: 3600s;
			-webkit-animation-duration: 3600s;
			-moz-animation-duration: 3600s;
			-o-animation-duration: 3600s;
		} /*60 times .minute*/

		.hour {
			animation-duration: 36000s;
			-webkit-animation-duration: 36000s;
			-moz-animation-duration: 36000s;
			-o-animation-duration: 36000s;
		} /*60 times .minute*/
		.tenhour {
			animation-duration: 360000s;
			-webkit-animation-duration: 360000s;
			-moz-animation-duration: 360000s;
			-o-animation-duration: 360000s;
		} /*10 times .hour*/

		/*The stopwatch looks good now. Lets add some styles*/

		/*Lets animate the digit now - the main part of this tutorial*/
		/*We are using prefixfree, so no need of vendor prefixes*/
		/*The logic of the animation is to alter the 'top' value of the absolutely
		positioned .numbers*/
		/*Minutes and Seconds should be limited to only '60' and not '100'
		Hence we need to create 2 animations. One with 10 steps and 10 digits and
		the other one with 6 steps and 6 digits*/
		@keyframes moveten {
			0% {top: 0;}
			100% {top: -400px;} 
			/*height = 40. digits = 10. hence -400 to move it completely to the top*/
		}
		@-webkit-keyframes moveten {
			0% {top: 0;}
			100% {top: -400px;} 
		}
		@-moz-keyframes moveten {
			0% {top: 0;}
			100% {top: -400px;} 
		}
		@-o-keyframes moveten {
			0% {top: 0;}
			100% {top: -400px;} 
		}

		@keyframes movesix {
			0% {top: 0;}
			100% {top: -240px;} 
			/*height = 40. digits = 6. hence -240 to move it completely to the top*/
		}
		@-webkit-keyframes movesix {
			0% {top: 0;}
			100% {top: -240px;} 
		}
		@-moz-keyframes movesix {
			0% {top: 0;}
			100% {top: -240px;} 
		}
		@-o-keyframes movesix {
			0% {top: 0;}
			100% {top: -240px;} 
		}
		


		/*Lets use a better font for the numbers*/
		@font-face {
			font-family: 'digital';
			src: url('DS-DIGI.TTF');
		}